<template>
  <div>


    <!--历史评估记录-->
    <el-dialog :visible.sync="isShow" >
      <!--小标题-->
      <div style="min-height: 90%;width: 100%;">
        <i class="el-icon-s-grid lf" style="font-size: 26px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 20px;"></i>
        <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #CCCCCC;height: 40px;;width: 98%;padding-top: 8px;padding-left: 1.85%;">
          <span style="font-size: 20px;font-weight: 500;color: black;">物品修改日志</span>
          <i class="el-icon-close rf" style="font-size: 26px;font-weight: bold;font-weight:bold;margin-right: 20px;"></i>
        </div>
      </div>
      <!--物品信息-->
      <div style="width: 100%;font-size: 20px;height: 100%;border: #d7d7d7 1px solid;background-color: #E4E4E4;">
        <div style="border-left: 2px solid #CCCCCC;width: 98%;height: 100%;padding: 2%;">
          <el-table :data="log"
          :row-style="{height:'46px'}"
          :header-cell-style="tableHeader"
          border
          style="width: 97%;border: #797979 1px solid;"
          :cell-style="{borderColor:'#797979',margin:'0',padding:'0'}">
            <el-table-column align="center" property="modifyTime" label="修改时间" width="150"></el-table-column>
            <el-table-column align="center" property="modifyBy" label="修改人" width="200"></el-table-column>
            <el-table-column align="center"property="updateDetails" label="修改详情"></el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>


    <!--面包屑-->
    <div style="height: 30px;width: 98%;background-color: white;padding-top: 13px;padding-left: 2%;">
      <i class="el-icon-s-home lf" style="font-size: 18px;margin-right: 10px;"></i>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >首页</el-breadcrumb-item>
        <el-breadcrumb-item >典当物品管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/goods' }">典当物品总览</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--选择区域-->
    <div style="padding: 20px;">
      <i class="el-icon-search lf" style="font-size: 22px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 12px;"></i>
      <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #E4E4E4;width: 98%;height: 40px;padding-top: 8px;padding-left: 1.85%;">
        <span style="font-size: 20px;font-weight: 500;color: black;">条件查询</span>
        <el-button @click="findGoodsPage" size="small" style="border-radius: 0%;background-color: #666666;margin-left: 75.5%;" type="info">查询</el-button>
        <el-button @click="clearFind" size="small" style="border-radius: 0%;background-color: #666666;margin-left: 2%;" type="info">清空</el-button>
      </div>
      <div style="border: #d7d7d7 1px solid;">
        <div class="cl" style="margin-bottom: 20px;margin-top: 20px;">
          <div class="lf" style="margin-left: 60px;">
            <span>名称：</span>
            <el-input
              style="width: 280px;"
              placeholder="请输入物品名称"
              v-model="find.goodsName"
              clearable>
            </el-input>
          </div>
          <div class="lf" style="margin-left: 120px;">
            <span>录入人：</span>
            <el-input
              style="width: 280px;"
              placeholder="请输入录入人姓名"
              v-model="find.inputUser"
              clearable>
            </el-input>
          </div>
          <div class="lf" style="margin-left: 120px;">
            <span>录入时间：</span>
            <el-date-picker
              v-model="times"
              @change="changeTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00','23:59:59']">
            </el-date-picker>
          </div>
        </div>
        <div class="cl">
          <div class="lf" style="margin-left: 60px;">
            <span>状态：</span>
            <el-select v-model="find.processExecuteId" clearable placeholder="请选择物品状态">
              <el-option
                v-for="item in processModel"
                :key="item.id"
                :label="item.stateName"
                :value="item.stateNum">
              </el-option>
            </el-select>
          </div>
          <div class="lf" style="margin-left: 107px;margin-bottom: 10px;">
            <span>品牌：</span>
            <el-select v-model="find.brandId" clearable placeholder="请选择物品品牌">
              <el-option
                v-for="item in brands"
                :key="item.brandId"
                :label="item.brandName"
                :value="item.brandId">
              </el-option>
            </el-select>
          </div>
          <div class="lf" style="margin-left: 107px;">
            <span>类别：</span>
            <el-cascader
             v-model="find.catId"
             style="width: 240px;"
             :options="cats"
             placeholder="请选择物品类别"
             collapse-tags
             clearable
             :props='props'
             >
            </el-cascader>
          </div>
          <div class="lf" style="margin-left: 107px;">
            <span>门店：</span>
              <el-select v-model="find.shopId" clearable placeholder="请选择物品门店">
                <el-option
                  v-for="item in shops"
                  :key="item.shopId"
                  :label="item.shopName"
                  :value="item.shopId">
                </el-option>
              </el-select>
          </div>
        </div>
      </div>
    </div>
    <!--数据区域-->
    <div style="padding: 20px;padding-top: 0px;">
      <i class="el-icon-s-grid lf" style="font-size: 22px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 12px;"></i>
      <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #E4E4E4;width: 98%;height: 40px;padding-top: 8px;padding-left: 1.85%;">
        <span style="font-size: 20px;font-weight: 500;color: black;">数据列表</span>
        <div style="margin-right: 100px;width: 600px;" class="rf">
          <el-button size="small" v-if="roleId==6" @click="routeVew('/valueGoods')" class="rf" style="border-radius: 0%;background-color: #666666;margin-right: 1%;"
          type="info">评估</el-button>
          <el-button size="small" v-if="roleId==5" @click="routeVew('/surveyGoods')" class="rf" style="border-radius: 0%;background-color: #666666;margin-right: 1.5%;"
          type="info">鉴定</el-button>
          <el-button size="small" v-if="roleId==3||roleId==4" @click="routeVew('/modifyGoods')" class="rf" style="border-radius: 0%;background-color: #666666;margin-right: 1%;"
          type="info">修改</el-button>
          <el-button size="small" v-if="roleId==3||roleId==4" @click="routeVew('/addGoods')" class="rf" style="border-radius: 0%;background-color: #666666;margin-right: 2.5%;"
          type="info">新增</el-button>
          <el-button size="small" v-if="roleId==3" @click="routeVew('/auditingGoods')" class="rf" style="border-radius: 0%;background-color: #666666;margin-right: 1%;"
          type="info">审核</el-button>
        </div>
      </div>
      <div>
        <el-table
          ref="configurationTable"
          :data="goods.records"
          :row-style="{height:'46px'}"
          border
          @selection-change="select"
          :header-cell-style="tableHeader"
          :cell-style="{borderColor:'#CCCCCC',margin:'0',padding:'0'}"
          style="width: 100%;font-size: 18px;border: #CCCCCC solid 1px;">
          <el-table-column
            align="center"
            type="selection"
            width="53">
          </el-table-column>
          <el-table-column
            align="center"
            prop="goodsName"
            label="物品名称"
            width="200">
          </el-table-column>
          <el-table-column
            align="center"
            prop="brandName"
            label="品牌"
            width="200">
          </el-table-column>
          <el-table-column
            align="center"
            prop="route"
            label="分类"
            width="280">
          </el-table-column>
          <el-table-column
            align="center"
            prop="inputUser"
            label="录入人"
            width="164">
          </el-table-column>
          <el-table-column
            align="center"
            prop="surveyor"
            label="鉴定人"
            width="164">
          </el-table-column>
          <el-table-column
            align="center"
            prop="assessor"
            label="评估人"
            width="164">
          </el-table-column>
          <el-table-column
            align="center"
            prop="inputTime"
            label="录入时间"
            width="200">
          </el-table-column>
          <el-table-column
            align="center"
            prop="processExecuteName"
            label="状态"
            width="180">
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
            width="180">
            <template v-slot="scope">
             <el-button type="text" @click="route(scope.row)">查看详情</el-button>
             <el-button type="text" @click="findUpGoodsLog(scope.row.goodsId)">修改记录</el-button>
             </template>
          </el-table-column>
         </el-table>
        </div>
        <!--分页-->
        <div style="background-color: #D7D7D7;height: 105px;width: 100%;">
          <el-pagination
          class="rf"
          style="margin-right: 2%;margin-top: 60px;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="goods.current"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="goods.total">
          </el-pagination>
        </div>
       </div>
    </div>


  </div>
</template>

<script>
  export default{
    name:"Goods",
    data(){
      return{
        //当前登录账号id
        accountId:"",
        //当前登录账号角色id
        roleId:"",
        //条件查询对象
        find:{
          //初始页码
          pageNum:1,
          //初始每页条数
          pageSize:10
        },
        //流程集合
        processModel:[],
        //品牌集合
        brands:[],
        //类别集合
        cats:[],
        //类别集合各参数
        props:{
          //显示字段
          label:"catName",
          //下级字段
          children:'children',
          //值对应的字段
          value:'catId',
          //空路径是否展示
          emitPath:false,
          //父子节点不互相关联
          checkStrictly:true
        },
        //门店集合
        shops:[],
        //选择时间段
        times:[],
        //查到的物品数据
        goods:{},
        //选中物品集合
        selection:[],
        //物品修改日志
        log:[],
        //显示修改日志窗口
        isShow:false
      }
    },
    methods:{
      /**
       * @param {Object} selection 选中集合
       */
      select(selection){
        this.selection = selection
        console.log(this.selection)
      },
      /**
       * 查看物品详情
       * @param {Object} obj 查看对象
       */
      route(obj){
        this.$router.push({name:'ShowGoods',params:obj})
      },
      /**
       * 跳转页面
       */
      routeVew(path){
        if(path == '/modifyGoods'){
          if(this.selection.length>1){
            this.$message({
              message: "一次只能选择一个物品进行修改",
              showClose: true,
              type: 'error'
            });
            return;
          }else if(this.selection.length<1){
            this.$message({
              message: "请选择一个物品进行修改",
              showClose: true,
              type: 'error'
            });
            return;
          }else{
            let goods = this.selection[0]
            console.log(goods)
            let id = goods.goodsId
            this.$router.push({name:'ModifyGoods',params:goods})
          }
        }else if(path == '/surveyGoods'){
          if(this.selection.length>1){
            this.$message({
              message: "一次只能选择一个物品进行鉴定",
              showClose: true,
              type: 'error'
            });
            return;
          }else if(this.selection.length<1){
            this.$message({
              message: "请选择一个物品进行鉴定",
              showClose: true,
              type: 'error'
            });
            return;
          }else{
            let goods = this.selection[0]
            if(goods.processExecuteId!=1||goods.execute.isActive==0){
              this.$message({
                message: "该物品流程不为待鉴定",
                showClose: true,
                type: 'error'
              });
              return;
            }
            if(goods.execute.accountId!=this.accountId){
              this.$message({
                message: "无权限鉴定该物品",
                showClose: true,
                type: 'error'
              });
              return;
            }
            this.$router.push({name:'SurveyGoods',params:goods})
          }
        }else if(path == '/valueGoods'){
          if(this.selection.length>1){
            this.$message({
              message: "一次只能选择一个物品进行估价",
              showClose: true,
              type: 'error'
            });
            return;
          }else if(this.selection.length<1){
            this.$message({
              message: "请选择一个物品进行估价",
              showClose: true,
              type: 'error'
            });
            return;
          }else{
            let goods = this.selection[0]
            if(goods.processExecuteId!=2||goods.execute.isActive==0){
              this.$message({
                message: "该物品流程不为待评估",
                showClose: true,
                type: 'error'
              });
              return;
            }
            if(goods.execute.accountId!=this.accountId){
              this.$message({
                message: "无权限评估该物品",
                showClose: true,
                type: 'error'
              });
              return;
            }
            this.$router.push({name:'ValueGoods',params:goods})
          }
        }else if(path == '/auditingGoods'){
          if(this.selection.length>1){
            this.$message({
              message: "一次只能选择一个物品进行审核",
              showClose: true,
              type: 'error'
            });
            return;
          }else if(this.selection.length<1){
            this.$message({
              message: "请选择一个物品进行审核",
              showClose: true,
              type: 'error'
            });
            return;
          }else{
            let goods = this.selection[0]
            if(goods.processExecuteId!=3||goods.execute.isActive==0){
              this.$message({
                message: "该物品流程不为待审核",
                showClose: true,
                type: 'error'
              });
              return;
            }
            if(goods.execute.accountId!=this.accountId){
              this.$message({
                message: "无权限审核该物品",
                showClose: true,
                type: 'error'
              });
              return;
            }
            this.$router.push({name:'AuditingGoods',params:goods})
          }
        }
        this.$router.push(path)
      },
      /**
       * 变化每页条数
       * @param {Object} val 新的值
       */
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      /**
       * 变化页码
       * @param {Object} val 新的页码
       */
      handleCurrentChange(val) {
        console.log(val)
        this.find.pageNum = val
        this.findGoodsPage()
      },
      /**
       * 表格表头样式
       */
      tableHeader({ row, column, rowIndex, columnIndex }){
        if (rowIndex === 0) {
          return 'display: table-cell;background-color: #D7D7D7;color:#333333;font-size:18px;font-weight: 500;height: 40px;margin-top: 85px;border-color:#CCCCCC;'
        }
      },
      /**
       * 清空选择对象
       */
      clearFind(){
        let num = this.find.pageNum
        let size = this.find.pageSize
        this.find = {}
        this.times = []
        this.find.pageNum = num
        this.find.pageSize = size
        this.findGoodsPage()
      },
      /**
       * 选择时间后向查询对象赋值
       */
      changeTime(){
        console.log(this.times)
        if(this.times!=null){
          this.find.minTime = this.times[0]
          this.find.maxTime = this.times[1]
        }else{
          this.find.minTime = null
          this.find.maxTime = null
        }
        console.log(this.find)
      },
      /**
       * 查出所有物品流程模型
       * @param {Object} id 典当物品流程1
       */
      findModelByProcessId(id){
        this.$http.get("/goods/processModel/findModelByProcessId",{params:{processId:id}}).then(resp=>{
          this.processModel = resp.data.data
        })
      },
      /**
       * 查找所有品牌
       */
      findAllBrands(){
        this.$http.get("/goods/brand/findAllBrands").then(resp=>{
          this.brands=resp.data.data
        })
      },
      /**
       * 查找所有类别
       */
      findAllCat(){
        this.$http.get("/goods/goodsCat/findAllCat").then(resp=>{
          this.cats=resp.data.data
          for (var i = 0; i < this.cats.length; i++) {
            let cat = this.cats[i]
            if (cat.children.length < 1) {
              // 最后一级没有数据将children变成undefined
              cat.children = undefined || null;
            }
          }
        })
      },
      /**
       * 查找所有门店
       */
      loadAllPawnShop(){
        this.$http.get("/admin/pawnShop/loadAllPawnShop",{
          params:{
            pageNum:1,
            pageSize:-1
          }
        }).then(resp=>{
          this.shops=resp.data.data.records
        })
      },
      /**
       * 查找所有物品
       */
      findGoodsPage(){
        this.$http.post("/goods/goods/findGoodsPage",this.find).then(resp=>{
          this.goods=resp.data.data
        })
      },
      /**
       * 根据token查登录用户id
       */
      loadMyinfo(){
        this.$http.get("/admin/adminInfo/findAdminInfoBytoken").then(resp=>{
          this.accountId = resp.data.data.accountId
          this.roleId = resp.data.data.roleId
        })
      },
      /**
       * 查找物品修改日志
       * @param {Object} goodsId 物品id
       */
      findUpGoodsLog(goodsId){
        this.$http.get("/goods/upgoodsLog/findUpGoodsLog",{params:{goodsId:goodsId}}).then(resp=>{
          this.log = resp.data.data
        })
        this.isShow = true
      }
    },
    created(){
      this.findModelByProcessId(1)
      this.findAllBrands()
      this.findAllCat()
      this.loadAllPawnShop()
      this.findGoodsPage()
      this.loadMyinfo()
    },
    watch: {
      $route(to, from) {
        console.log(to,from)
      if(to.fullPath=='/goods'){
        window.location.reload(); //监测到路由发生跳转时刷新一次页面
      }
    },
},
  }
</script>

<style>
  *{
    padding: 0;
    margin: 0;
  }
  .cl::after{
    content: '';
    display: block;
    clear: both;
  }
  .lf{
  	float: left;
  }
  .rf{
  	float: right;
  }
  .el-breadcrumb__inner{
    font-size: 16px;
    color: #3b3b3b;
  }
  .el-icon-arrow-right:before{
    color: #3b3b3b;
  }
  .el-table th.gutter{
    display: table-cell!important;
  }
  .cell-class-name {
    border-color: #d7d7d7;
  }
  .el-checkbox__inner{
    border: #3b3b3b solid 1px;
  }
  .el-button--small{
    font-size: 14px;
    width: 70px;
    height: 30px;
  }
  .el-dialog__header{
    padding: 0;
  }
  .el-dialog__body{
    padding: 0;
  }
  .el-table--border::after, .el-table--group::after{
    width: 0;
  }
</style>
